<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/my.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui.css">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="login-bg">

<div class="login">
    <div class="message">宠物管理平台</div>
    <div id="darkbannerwrap"></div>
    <%--todo 图片无法加载。--%>

    <form class="layui-form">


        <div class="form-group">
            用户ID：
            <div>
                <input id="userid" type="text" name="userid" value="xxx"
                       placeholder="用户ID"/>
                <span id="useridspan"></span>
            </div>
        </div>

        <div class="form-group">
            <span>密码：</span>
            <div>
                <input id="password" type="text" name="password"
                       value="xxx" placeholder="密码" class="layui-input"/>
            </div>
        </div>


        <div class="form-group">
            <span>身份：</span>

            <label for="管理员" class="radio">
                <span class="radio-bg"></span>
                <input type="radio" name="identity" id="管理员" value="1"/> 管理员
                <span class="radio-on"></span>
            </label>
            <label for="用户" class="radio">
                <span class="radio-bg"></span>
                <input type="radio" name="identity" id="用户" value="2" checked="checked"/> 用户
                <span class="radio-on"></span>
            </label>
            <%----%>
        </div>
    </form>


    <div align="center">
        <button type="button" onclick="verify()" class="btn btn-primary">
            <span class="glyphicon glyphicon-user"></span> 登陆
        </button>
    </div>
    <div align="center" id="prompt"></div>
</div>

<script type="text/javascript">
    function verify() {
        var checkempty = false;
        var data = {};
        var t = $('form').serializeArray();
        $.each(t, function () {
            if (this.value === "") {
                checkempty = true;//表示不符合。
            }
            data [this.name] = this.value;
        });
        data["online"] = false;
        if (checkempty) {
            /*所以return不能写在，$.each下面？？？*/
            var useridspan = document.getElementById("useridspan");
            useridspan.innerHTML = "不能为空。";
            useridspan.style.color = "red";
            return false;
        }
        $.ajax({
            url: "./verify",
            // 相对路径?ok
            type: "POST",
            data: data,
            success: function (data) {
                if (data.endsWith("false")) {
                    /*要改？boolean到String不需要toString？【测试？？？】*/
                    /*错误。*/
                    var x = document.getElementById("prompt");
                    x.style.color = "red";
                    x.innerText = '该用户类型下，用户名或者密码错误';

                } else {/*正确*/
                    var userid = $("#userid").val();

                    if (data.toString().endsWith("administrator")) {
                        window.location.href = "./personal?userid=" + userid + "&identity=" + data.toString();
                        /*【测试，有没有用。】*/
                    } else {
                    }
                    window.location.href = "./personal?userid=" + userid + "&identity=" + data.toString();
                }
            }, error: function (msg) {
                alert('由于跨域问题,查看开发者面板-Network里面的Ajax请求verify的Response信息监测是否正确');
                console.log(msg);
            }
        });
    }
</script>


</body>
</html>